<template>
  <div class="loginMain" ref="loginMain">
    <div class="loginTitle">
      <p>用户登录</p>
    </div>
    <div class="line" ref="line">
      <div class="lineDot"></div>
      <div class="lineDot"></div>
      <div class="lineDot2" ref="lineDot2"></div>
    </div>
    <div class="loginMainInner">
      <div class="bg1" ref="bg1"></div>
      <div class="form">
        <div class="formItem" ref="formItem1">
          <p>用户名</p>
          <div class="formItemBody" ref="formItemBody">
            <div class="icon">
              <img src="../../assets/icon_user.png" alt="">
            </div>
            <input type="text" v-model="username" placeholder="请输入用户名">
          </div>
        </div>
        <div class="formItem" ref="formItem2">
          <p>密码</p>
          <div class="formItemBody" ref="formItemBody">
            <div class="icon">
              <img src="../../assets/icon_password.png" alt="">
            </div>
            <input type="password" v-model="password" placeholder="请输入密码">
          </div>
        </div>
        <div class="formItem" ref="formItem3">
          <p>验证码</p>
          <div class="formItemBody" ref="formItemBody">
            <div class="icon">
              <img src="../../assets/icon_yzm.png" alt="">
            </div>
            <input type="password" v-model="code" placeholder="请输入验证码">
          </div>
        </div>
        <div @click="handleLogin" class="LoginButton" ref="formItem4">
          <span>登 录</span>
        </div>
      </div>
      <img ref="icon_sanjiao" class="icon_sanjiao" src="../../assets/icon_sanjiao.png" alt="">
    </div>
  </div>
</template>

<script>
import {gsap} from "gsap";
import {login} from "@/api/api/LargeScreenData.js";
import {ElMessage} from "element-plus";

export default {
  data() {
    return {
      username: 'admin',
      password: '123456',
      code: '1234'
    }
  },
  components: {},
  computed: {},
  mounted() {
    var that = this;
    const dot = this.$refs.lineDot2;
    const line = this.$refs.line;
    const maxDistance = line.offsetWidth - dot.offsetWidth; // 最大移动距离
    const tl = gsap.timeline({repeat: -1, yoyo: true});
    tl.to(dot, {duration: 3, x: maxDistance});
    const icon = this.$refs.icon_sanjiao;
    gsap.set(icon, {transformOrigin: "right center"}); // 设置旋转的原点为右侧中心
    gsap.to(icon, {duration: 1, rotationY: 360, repeat: -1, repeatDelay: 2});
    const bg1 = this.$refs.bg1;
    gsap.fromTo(bg1,
        {opacity: 0.5},
        {opacity: 1, duration: 1, repeat: -1, yoyo: true});

    gsap.fromTo(this.$refs.loginMain,
        {autoAlpha: 0, x: 100},
        {autoAlpha: 1, x: 0, duration: 1, delay: 0, ease: "power2.out", transformOrigin: "center"}
    );
    this.animateFormItem(this.$refs.formItem1, 0.5);
    this.animateFormItem(this.$refs.formItem2, 1);
    this.animateFormItem(this.$refs.formItem3, 1.5);
    this.animateFormItem(this.$refs.formItem4, 2);
  },
  methods: {
    animateFormItem(formItem, delay) {
      gsap.fromTo(formItem,
          {autoAlpha: 0, rotationX: -90},
          {autoAlpha: 1, rotationX: 0, duration: 1, delay: delay, ease: "power2.out", transformOrigin: "center"}
      );
    },
    // 登录
    async handleLogin() {
      // 检查用户名和密码是否已被输入
      if (!this.username || !this.password) {
        // 如果没有输入用户名或密码，显示错误消息并退出函数
        ElMessage.error('请输入用户名和密码');
        return;
      }
      try {
        // 使用用户输入的用户名和密码调用登录 API
        const response = await login({username: this.username, password: this.password});
        // 检查返回的响应码
        if (response.code === 1) {
          // 登录成功，重定向到主页
          ElMessage({
            message: '登录成功',
            type: 'success',
          })
          // 跳转到首页
          this.$router.push({path: '/'});
        } else {
          // 登录失败，显示错误消息
          ElMessage.error(response.message);
        }
      } catch (error) {
        // 发生错误，显示错误消息
        ElMessage.error('登录失败，请检查网络连接');
      }
    }
  },
  filters: {},
  watch: {}
}
</script>

<style lang="scss" scoped>
.loginMain {
  width: 489px;
  opacity: 0;

  .loginTitle {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;

    p {
      font-size: 30px;
      font-family: AlibabaPuHuiTi;
      font-weight: 500;
      color: #D3DCE5;
      letter-spacing: 10px;
      padding-bottom: 10px;
    }
  }

  .line {
    width: calc(100% - 30px);
    margin: 15px auto 0 auto;
    height: 2px;
    background: #438BC3;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;

    .lineDot {
      width: 4px;
      height: 2px;
      background: rgba(224, 185, 71, 1);
      position: relative;
    }

    .lineDot2 {
      position: absolute;
      left: 0;
      top: 0;
      width: 4px;
      height: 2px;
      background: rgba(224, 185, 71, 1);
    }
  }

  .loginMainInner {
    background: url("../../assets/loginbg.png") no-repeat;
    width: 489px;
    height: 447px;
    background-size: 100% 100%;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;
    position: relative;

    .bg1 {
      width: calc(100% - 40px);
      position: absolute;
      top: 16px;
      left: 20px;
      pointer-events: none;
      height: 100%;
      background: url("../../assets/bg1.png");
      background-size: 100% 100%;
    }

    .icon_sanjiao {
      position: absolute;
      right: 10px;
      bottom: 10px;
      width: 18px;
      height: 18px;
    }

    .form {
      width: 320px;
      margin-top: 15px;

      .formItem {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: nowrap;
        flex-direction: column;
        align-content: flex-start;
        margin-top: 25px;
        opacity: 0;

        p {
          font-size: 14px;
          font-family: AlibabaPuHuiTi;
          font-weight: 400;
          color: #E6EFFF;
          opacity: 0.76;
        }

        .formItemBody {
          background: url("../../assets/inputBg.png");
          background-size: 100% 100%;
          width: 320px;
          height: 40px;
          margin-top: 10px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-wrap: nowrap;
          flex-direction: row;
          align-content: flex-start;

          .icon {
            width: 47px;
            border-right: 1px solid rgba(28, 152, 210, 1);
            position: relative;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: nowrap;
            flex-direction: row;
            align-content: flex-start;

            img {
              height: 18px;
            }
          }

          input {
            background: none;
            width: calc(100% - 12px);
            outline: none;
            border: none;
            position: relative;
            height: calc(100% - 3px);
            color: #fff;
            margin-left: 12px;
          }

          /* 标准写法 */
          input::placeholder {
            color: rgba(126, 175, 236, 1);
          }

          /* WebKit 内核浏览器（Chrome、Safari） */
          input::-webkit-input-placeholder {
            color: rgba(126, 175, 236, 1);
          }

          /* Internet Explorer 浏览器 */
          input:-ms-input-placeholder {
            color: rgba(126, 175, 236, 1);
          }
        }

        .formItemBody:hover {
          background: url("../../assets/inputActiveBg.png");
          background-size: 100% 100%;

          .icon {
            width: 47px;
            border-right: 1px solid rgba(41, 207, 255, 1);
            position: relative;
            height: 100%;
          }

        }
      }

      .LoginButton {
        width: 320px;
        height: 40px;
        background: linear-gradient(90deg, #115EEA, #0ABFE0);
        border-radius: 1px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;
        align-content: flex-start;
        font-size: 18px;
        font-family: SourceHanSansCN;
        font-weight: 500;
        color: #E8EFF4;
        margin-top: 34px;
        cursor: pointer;
      }
    }
  }
}

</style>
